<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>退款详情</span>
          <el-button size="small" @click="$router.back()">返回</el-button>
        </div>
      </template>

      <el-row :gutter="16">
        <!-- 左侧：售后申请详情 -->
        <el-col :span="16">
          <!-- 商品信息 -->
          <div class="block-title">售后申请</div>
          <div class="goods-box">
            <el-image
              v-if="orderDetail.goodsimg"
              :src="orderDetail.goodsimg"
              class="goods-img"
              fit="cover"
              :preview-src-list="imagePreviewList"
            />
            <div class="goods-meta">
              <div class="goods-name">{{ orderDetail.goodsname || '-' }}</div>
              <div class="goods-specs">{{ orderDetail.goodsSpecs || '-' }}</div>
              <div class="goods-qty">{{ orderDetail.goodsnumber ? `x${orderDetail.goodsnumber}` : '' }}</div>
            </div>
          </div>

          <!-- 申请信息表 -->
          <el-descriptions :column="1" border class="mt16">
            <el-descriptions-item label="退款单号">{{ detail.asId }}</el-descriptions-item>
            <el-descriptions-item label="对应订单号">{{ orderDetail.orderNumber || detail.orderId }}</el-descriptions-item>
            <el-descriptions-item label="售后类型">{{ formatType(detail.asType) }}</el-descriptions-item>
            <el-descriptions-item label="售后状态">{{ formatStatus(detail.asStatus) }}</el-descriptions-item>
            <el-descriptions-item label="申请退款金额">¥ {{ detail.asMoney ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="实际退款金额">¥ {{ detail.asMoney ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="退货数量">{{ orderDetail.goodsnumber ?? '-' }}</el-descriptions-item>
            <el-descriptions-item label="退款申请时间">{{ formatDate(detail.asCreateTime) }}</el-descriptions-item>
            <el-descriptions-item label="退款完成时间">{{ formatDate(detail.asSuccessTime) }}</el-descriptions-item>
            <el-descriptions-item label="问题描述">{{ detail.asCause || '-' }}</el-descriptions-item>
          </el-descriptions>

          <!-- 凭证图片 -->
          <div class="block-title mt16">凭证</div>
          <div class="proof-list">
            <template v-if="proofImages.length">
              <el-image
                v-for="(img, idx) in proofImages"
                :key="idx"
                :src="img"
                :preview-src-list="proofImages"
                class="proof-img"
                fit="cover"
              />
            </template>
            <div v-else class="text-muted">无</div>
          </div>

          <!-- 商家处理 -->
          <div class="block-title mt16">商家处理</div>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="审核结果">{{ detail.asStatus ? formatStatus(detail.asStatus) : '-' }}</el-descriptions-item>
            <el-descriptions-item label="拒绝/终止原因">{{ detail.refundReason || '-' }}</el-descriptions-item>
            <el-descriptions-item label="备注信息">-</el-descriptions-item>
          </el-descriptions>
        </el-col>

        <!-- 右侧：订单相关信息 -->
        <el-col :span="8">
          <div class="block-title">订单相关信息</div>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="订单编号">{{ orderDetail.orderNumber || '-' }}</el-descriptions-item>
            <el-descriptions-item label="银行开户行">{{ orderDetail.bankName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="银行开户名">{{ orderDetail.bankAccountName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="银行卡号">{{ orderDetail.bankCardNo || '-' }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>
  </div>
  
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { getAfterSale } from '@/api/zmhshop/afterSale'
import { getOrderst } from '@/api/zmhshop/orderst'

const route = useRoute()
const detail = ref({})
const orderDetail = ref({})

const formatType = (v) => ({ 1: '退款', 2: '退货' }[v] || v)
const formatStatus = (v) => ({ 1: '申请中', 2: '通过售后', 3: '拒绝售后', 4: '卖家终止售后', 5: '待平台退款', 6: '完成售后', 7: '买家取消售后' }[v] || v)
const formatDate = (val) => {
  if (!val) return '-'
  try {
    const d = new Date(val)
    if (Number.isNaN(d.getTime())) return String(val)
    const yyyy = d.getFullYear()
    const mm = String(d.getMonth() + 1).padStart(2, '0')
    const dd = String(d.getDate()).padStart(2, '0')
    const hh = String(d.getHours()).padStart(2, '0')
    const mi = String(d.getMinutes()).padStart(2, '0')
    return `${yyyy}-${mm}-${dd} ${hh}:${mi}`
  } catch (e) {
    return String(val)
  }
}

// 退款凭证图片，后端以逗号分隔字符串保存时的解析
const proofImages = computed(() => {
  const raw = detail.value?.refundProof
  if (!raw) return []
  if (Array.isArray(raw)) return raw.filter(Boolean)
  return String(raw)
    .split(',')
    .map(s => s.trim())
    .filter(Boolean)
})

const imagePreviewList = computed(() => {
  const img = orderDetail.value?.goodsimg
  return img ? [img] : []
})

onMounted(async () => {
  const asId = route.query.asId
  if (!asId) return
  const res = await getAfterSale(asId)
  detail.value = res.data || {}

  if (detail.value?.orderId) {
    try {
      const orderRes = await getOrderst(detail.value.orderId)
      orderDetail.value = orderRes.data || {}
    } catch (e) {
      // 忽略订单加载失败，页面仍可展示退款基础信息
    }
  }
})
</script>

<style scoped>
.card-header { display: flex; justify-content: space-between; align-items: center; }
.block-title { font-weight: 600; margin: 6px 0 12px; }
.mt16 { margin-top: 16px; }
.text-muted { color: #999; }

.goods-box { display: flex; gap: 12px; align-items: center; }
.goods-img { width: 72px; height: 72px; border-radius: 4px; overflow: hidden; }
.goods-meta { display: flex; flex-direction: column; gap: 6px; }
.goods-name { font-weight: 600; }
.goods-specs { color: #666; }
.goods-qty { color: #909399; }

.proof-list { display: flex; flex-wrap: wrap; gap: 8px; }
.proof-img { width: 140px; height: 140px; border-radius: 4px; }
</style>
